<template>
  <view class="custom-nav-bar">
    <view class="nav-content">
      <!-- 倒计时组件 -->
      <nut-countdown
        :start-time="startTime"
        :end-time="endTime"
        @on-finish="handleCountdownFinish"
        @time-change="formatTime" 
      >
        <div class="countdown-text">
          剩余时间：
          <span class="time">{{ timeData.hours }}</span>:
          <span class="time">{{ timeData.minutes }}</span>:
          <span class="time">{{ timeData.seconds }}</span>
        </div>
      </nut-countdown>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 当前时间戳
const now = new Date().getTime()
const startTime = now
const endTime = now + 2 * 60 * 60 * 1000 // 2小时后

// 时间数据响应式对象
const timeData = reactive({
  hours: '00',
  minutes: '00',
  seconds: '00'
})

// 格式化剩余时间
const formatTime = (totalMilliseconds) => {
  const totalSeconds = Math.floor(totalMilliseconds / 1000)
  const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0')
  const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0')
  const seconds = String(totalSeconds % 60).padStart(2, '0')
  timeData.hours = hours
  timeData.minutes = minutes
  timeData.seconds = seconds
}

// 倒计时结束回调
const handleCountdownFinish = () => {
  console.log('考试时间到！')
}
</script>

<style lang="scss" >
.custom-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background-color: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding-top: var(--status-bar-height); // 适配刘海屏
}

.nav-content {
  text-align: center;
}

.countdown-text {
  font-size: 28px;
  color: #fff;
  .time {
    display: inline-block;
    min-width: 24px;
    text-align: center;
  }
}
</style>